<template>
	<view class="e-line-progress" :style="[addStyle(props.customStyle)]">
		<view
			class="e-line-progress__background"
			ref="backgroundRef"
			:id="elId"
			:style="[
				{
					backgroundColor: props.inactiveColor,
					height: addUnit(props.height)
				}
			]"
		></view>
		<view class="e-line-progress__line" :style="[progressStyle]">
			<slot>
				<text v-if="props.showText && Number(props.percentage) >= 10" class="e-line-progress__text">{{ innserPercentage + '%' }}</text>
			</slot>
		</view>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import mpMixin from '../../libs/mixin/mpMixin';
/**
 * lineProgress 线型进度条
 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
 * @tutorial https://www.uviewui.com/components/lineProgress.html
 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
 * @property {Boolean}			showText		是否在进度条内部显示百分比的值 ( 默认 true )
 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
 *
 * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
 */
export default defineComponent({
	name: 'e-line-progress',
	mixins: [mpMixin]
});
</script>
<script setup lang="ts">
import { ref, computed, watch, toRefs, onMounted, getCurrentInstance } from 'vue';
import { lineProgressProps } from './props';
import { useDefaultProps } from '../../libs/hooks';
import { addUnit, addStyle } from '../../libs/utils/_utils';
import { sleep, numberRandom, getRect, getNvueRect, nanoid } from '../../libs/utils';

import componentsProps, { type DefaultProps } from '../../libs/config/componentsProps';

const { lineProgress: lineProgressDefaultProps } = toRefs(componentsProps);

const ctx = getCurrentInstance();

const _props = defineProps(lineProgressProps);
const props = useDefaultProps<DefaultProps['lineProgress']>(_props, lineProgressDefaultProps);

const lineWidth = ref<string|number>(0);

const progressStyle = computed(() => {
	return {
		width: lineWidth.value,
		backgroundColor: props.value.activeColor,
		height: addUnit(props.value.height as string)
	};
});
const innserPercentage = computed(() => {
	// 控制范围在0-100之间
	return numberRandom(0, 100, props.value.percentage);
});

const backgroundRef = ref();
const elId = nanoid(21, true);
const getProgressWidth = async () => {
	// #ifndef APP-NVUE
	return getRect(ctx, `#${elId}`);
	// #endif

	// #ifdef APP-NVUE
	return await getNvueRect(backgroundRef.value);
	// #endif
};

watch(
	() => props.value.percentage,
	() => {
		resizeProgressWidth();
	}
);

const resizeProgressWidth = () => {
	getProgressWidth().then((size) => {
		const { width } = size;
		// 通过设置的percentage值，计算其所占总长度的百分比
		lineWidth.value = (width! * innserPercentage.value) / 100 + 'px';
	});
};

const init = () => {
	sleep(20).then(() => {
		resizeProgressWidth();
	});
};
onMounted(() => {
	init();
});
</script>

<style lang="scss" scoped>
@import "../../libs/theme/line-progress.scss";
</style>
